<!--
 * @Author: zhangweinan
 * @Date: 2022-12-27 11:29:26
 * @LastEditors: zhangweinan
 * @LastEditTime: 2022-12-27 19:03:21
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\roles\verificationCode\index.vue
-->
<template>
  <div class="container">
    <div v-if="!successState">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="LoginRules"
        class="login-form"
      >
        <!-- 短信验证码登录 -->
        <div>
          <el-form-item prop="mobileCode">
            <el-input
              v-model="loginForm.mobileCode"
              type="text"
              auto-complete="off"
              placeholder="请输入邀请码"
            >
              <template slot="icon">
                <svg-icon
                  slot="prefix"
                  icon-class="password"
                  class="el-input__icon input-icon"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="loginForm.status" label="1">同意</el-radio>
            <el-radio v-model="loginForm.status" label="-1">拒绝</el-radio>
          </el-form-item>
        </div>

        <!-- 下方的登录按钮 -->
        <el-form-item style="width: 100%">
          <el-button
            size="medium"
            type="primary"
            style="width: 100%"
            @click.native.prevent="getCode"
          >
            <span>验证</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <h2>感谢您接受本次的邀请！</h2>
    </div>
  </div>
</template>
<script>
import { confirmMessageInvitation } from "@/api/enterprise/invitation";
export default {
  data() {
    return {
      loginForm: {
        mobileCode: "",
        status: "1",
      },
      LoginRules: {
        mobileCode: [
          { required: true, trigger: "blur", message: "验证码不能为空" },
        ],
      },
      successState: false,
    };
  },
  methods: {
    getCode() {
      this.$refs["loginForm"].validate((valid) => {
        if (!valid) return false;
        let param = {
          code: this.loginForm.mobileCode,
          status: this.loginForm.status,
        };
        confirmMessageInvitation(param).then((res) => {
          this.successState = true;
          this.$message.success("验证成功");
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  position: relative;
  top: 40%;
  .login-form {
    width: 200px;
  }
}
</style>
